<script setup lang="ts">
  import { getOrderStatusQty } from '@/api/order'
  import { HMessageBox } from '@/components/common/message'
  import { TabPaneName } from 'element-plus'
  import { computed, ref } from 'vue'

  const emits = defineEmits<{
    (
      e: 'changeStatus',
      value: 0 | 1 | 2 | 3 | 4 | 5 | 1001 | 2000 | 2001 | 2002,
      value2: 0 | 1 | 2 | 3 | 4 | 5,
    ): void
  }>()

  const activeName = ref<0 | 1 | 2 | 3 | 4 | 5 | 1001 | 2000 | 2001 | 2002>(0)
  const activeChildName = ref<0 | 1 | 2 | 3 | 4 | 5>(0)
  const orderStatusQtyData = ref<OrderAPIResponse.OrderListStatusQty>({
    totalOrder: 0,
    waitDispatch: 0,
    waitNetworkHandlerOrder: 0,
    handlerOrder: 0,
    statementReview: 0,
    finishOrder: 0,
    cancelOrder: 0,
    waitNetworkReceivingOrderQty: 0,
    waitNetworkDispatchOrderQty: 0,
    waitEngineerReceivingOrderQty: 0,
    waitCallPhoneQty: 0,
    waitReservationQty: 0,
    waitSignQty: 0,
    feeWaitCheckQty: 0,
    spareWaitCheckQty: 0,
    isPauseQty: 0,
    isHsQty: 0,
    isHxQty: 0,
  })
  const parentStatusList = computed(() => {
    return [
      { value: 0, label: `全部工单(${orderStatusQtyData.value.totalOrder})` },
      { value: 1, label: `待派单(${orderStatusQtyData.value.waitDispatch})` },
      { value: 2, label: `待服务商处理(${orderStatusQtyData.value.waitNetworkHandlerOrder})` },
      { value: 3, label: `处理中(${orderStatusQtyData.value.handlerOrder})` },
      { value: 2001, label: `待核销(${orderStatusQtyData.value.isHxQty})` },
      { value: 1001, label: `结单审核(${orderStatusQtyData.value.statementReview})` },
      { value: 2002, label: `待核实上门时间(${orderStatusQtyData.value.isHsQty})` },
      { value: 2000, label: `已挂起(${orderStatusQtyData.value.isPauseQty})` },
      { value: 4, label: `已完成(${orderStatusQtyData.value.finishOrder})` },
      { value: 5, label: `已取消(${orderStatusQtyData.value.cancelOrder})` },
    ]
  })
  const childStatusList = computed(() => {
    if (activeName.value === 2) {
      return [
        { value: 0, label: `全部(${orderStatusQtyData.value.handlerOrder})` },
        {
          value: 1,
          label: `服务商未接单(${orderStatusQtyData.value.waitNetworkReceivingOrderQty})`,
        },
        {
          value: 2,
          label: `服务商未派单(${orderStatusQtyData.value.waitNetworkDispatchOrderQty})`,
        },
        {
          value: 3,
          label: `工程师未接单(${orderStatusQtyData.value.waitEngineerReceivingOrderQty})`,
        },
      ]
    }

    if (activeName.value === 3) {
      return [
        { value: 0, label: `全部(${orderStatusQtyData.value.waitNetworkHandlerOrder})` },
        { value: 1, label: `未拨打电话(${orderStatusQtyData.value.waitCallPhoneQty})` },
        { value: 2, label: `未预约(${orderStatusQtyData.value.waitReservationQty})` },
        { value: 3, label: `未签到(${orderStatusQtyData.value.waitSignQty})` },
        { value: 4, label: `费用待审核(${orderStatusQtyData.value.feeWaitCheckQty})` },
        { value: 5, label: `配件待审核(${orderStatusQtyData.value.spareWaitCheckQty})` },
      ]
    }

    return []
  })

  const tabClick = (tab: TabPaneName) => {
    activeName.value = Number(tab) as typeof activeName.value
    activeChildName.value = 0
    emits('changeStatus', activeName.value, activeChildName.value)
  }

  const tabClickChild = (tab: TabPaneName) => {
    activeChildName.value = Number(tab) as typeof activeChildName.value
    emits('changeStatus', activeName.value, activeChildName.value)
  }

  const getOrderStatusQtyData = async () => {
    const res = await getOrderStatusQty()
    if (res.data.code === 20000) {
      orderStatusQtyData.value = res.data.data.row
    } else {
      HMessageBox.error(res.data.message)
    }
  }

  defineExpose({
    getOrderStatusQtyData,
    setStatus: (data: 0 | 1 | 2 | 3 | 4 | 5 | 1001 | 2000 | 2001 | 2002) => {
      activeName.value = data
      if (data === 2 || data === 3) {
        activeChildName.value = 0
      }
      emits('changeStatus', activeName.value, activeChildName.value)
    },
  })
</script>

<template>
  <div>
    <el-tabs class="demo-tabs" v-model="activeName" @tab-change="tabClick">
      <el-tab-pane
        v-for="item in parentStatusList"
        :key="item.value"
        :name="item.value"
        :label="item.label"
      />
    </el-tabs>
    <div v-if="activeName == 2 || activeName == 3" style="display: flex; align-items: center">
      筛选：&nbsp;&nbsp;
      <el-tabs class="demo-tabs-child" v-model="activeChildName" @tab-change="tabClickChild">
        <el-tab-pane
          v-for="item in childStatusList"
          :key="item.value"
          :name="item.value"
          :label="item.label"
        />
      </el-tabs>
    </div>
  </div>
</template>
<style lang="scss" scoped>
  .demo-tabs {
    :deep(.el-tabs__header) {
      margin: 0 0 8px !important;

      .el-tabs__nav-wrap {
        .el-tabs__nav {
          .el-tabs__item.is-top:nth-child(2) {
            padding-left: 0;
          }
        }
      }
    }

    :deep(.el-tabs__nav-wrap::after) {
      height: 1px;
    }
  }

  .demo-tabs-child {
    &.el-tabs {
      --el-tabs-header-height: 26px;
    }

    :deep(.el-tabs__header) {
      margin: 0 0 2px;

      .el-tabs__nav-wrap {
        .el-tabs__nav {
          .el-tabs__item {
            padding: 0 10px;
            font-size: 12px;
          }

          .el-tabs__item.is-top:nth-child(2) {
            padding-left: 0;
          }
        }

        &::after {
          display: none;
        }
      }
    }

    :deep(.el-tabs__nav-wrap::after) {
      height: 1px;
    }
  }
</style>
